<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "长期寿险");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style>
.title {
	z-index: 0 !important;
}
.weui-navbar {
	z-index: 0;
}

.grey-link-title {
	color: #717A84;
}

.text-left {
	text-align: left;
}

.img-container {
	width: 100%;
}

.img-container img {
	display: block;
	width: 100%;
}

.weui-navbar {
	top: auto;
}
.selected-color {
	color: #888;
}
</style>
<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>
<div class="weui-tab">
	<div class="weui-navbar">
		<a class="weui-navbar__item weui-bar__item--on" href="#tab1">保险产品</a>
		<a class="weui-navbar__item" href="#tab2">计划书 </a> <a
			class="weui-navbar__item" href="#tab3">需求快递 </a>
	</div>
	<div class="weui-tab__bd">

		<!-- Tab 1 -->
		<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
			<div class="weui-cell">
				<div class="weui-cell__hd">
					<label for="name" class="weui-label">险种:</label>
				</div>
				<div class="weui-cell__bd">
					<input class="weui-input selected-color" id="insurance-category" type="text" value="点这里选择险种">
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd">
					<label for="name" class="weui-label">公司:</label>
				</div>
				<div class="weui-cell__bd">
					<input class="weui-input selected-color" id="company" type="text" value="点这里选择公司">
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd">
					<label for="name" class="weui-label">年龄:</label>
				</div>
				<div class="weui-cell__bd">
					<input class="weui-input selected-color" id="age" type="text" value="点这里选择年龄">
				</div>
			</div>
		</div>

		<!-- Tab 2 -->
		<div id="tab2" class="weui-tab__bd-item"></div>

		<!-- Tab 3 -->
		<div id="tab3" class="weui-tab__bd-item">
			<div class="img-container">
				<img
					src="<c:url value="/images/we/lifeInsurance/demandIndex.png" />">
			</div>
			<div class="weui-cells__title">投保人信息</div>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">姓名</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入姓名">
					</div>
				</div>
				<div class="weui-cell weui-cell_select weui-cell_select-after">
					<div class="weui-cell__hd">
						<label for="" class="weui-label">性别</label>
					</div>
					<div class="weui-cell__bd">
						<select class="weui-select" name="select2">
							<option value="1">男</option>
							<option value="2">女</option>
						</select>
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label for="" class="weui-label">出生年月</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="date" value="">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">保险金额</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入计划投入的保险金额">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">投入期</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="在此处输入需求描述" rows="3"></textarea>
						<div class="weui-textarea-counter">
							<span>0</span>/200
						</div>
					</div>
				</div>
			</div>

			<div class="weui-cells__title">被保险人信息</div>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">姓名</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入姓名">
					</div>
				</div>
				<div class="weui-cell weui-cell_select weui-cell_select-after">
					<div class="weui-cell__hd">
						<label for="" class="weui-label">性别</label>
					</div>
					<div class="weui-cell__bd">
						<select class="weui-select" name="select2">
							<option value="1">男</option>
							<option value="2">女</option>
						</select>
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label for="" class="weui-label">出生年月</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="date" value="">
					</div>
				</div>
			</div>

			<div class="weui-cells__title">联系人信息</div>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">姓名</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入姓名">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">手机号</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="number" pattern="[0-9]*"
							placeholder="请输入手机号">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">地址</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入地址">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<script>
$("#insurance-category").select({
    title: "选择险种",
    multi: true,
    min: 0,
    max: 3,
    items: [
      {
        title: "健康",
        value: 1,
        description: "额外的数据1"
      },
      {
        title: "意外",
        value: 2,
        description: "额外的数据2"
      },
      {
        title: "理财",
        value: 3,
        description: "额外的数据3"
      },
      {
        title: "养老",
        value: 4,
        description: "额外的数据4"
      },
      {
        title: "教育",
        value: 5,
        description: "额外的数据5"
      },
      {
        title: "身价",
        value: 6,
        description: "额外的数据6"
      },
      {
         title: "保障",
         value: 7,
         description: "额外的数据7"
      },
      {
          title: "资产增值保全",
          value: 8,
          description: "额外的数据8"
       },
    ],
    beforeClose: function(values, titles) {
      return true;
    },
    onChange: function(d) {
      console.log(this, d);
    },
    onClose: function (d) {
      console.log('close')
    }
  });
  
$("#company").select({
    title: "选择公司",
    multi: true,
    min: 0,
    max: 3,
    items: [
      {
        title: "横琴人寿",
        value: 1,
        description: "额外的数据1"
      },
      {
        title: "太平洋财险",
        value: 2,
        description: "额外的数据2"
      },
      {
        title: "阳光财险",
        value: 3,
        description: "额外的数据3"
      },
      {
        title: "人保寿险",
        value: 4,
        description: "额外的数据4"
      },
      {
        title: "新华保险",
        value: 5,
        description: "额外的数据5"
      },
      {
        title: "中国平安",
        value: 6,
        description: "额外的数据6"
      },
      {
         title: "中国人寿",
         value: 7,
         description: "额外的数据7"
      },
      {
    	  title: "泰康人寿",
    	  value: 8,
    	  description: "额外的数据8"
      },
      {
    	  title: "合众人寿",
    	  value: 9,
    	  description: "额外的数据9"
      },
      {
    	  title: "天安保险",
    	  value: 10,
    	  description: "额外的数据10"
      },
    ],
    beforeClose: function(values, titles) {
      return true;
    },
    onChange: function(d) {
      console.log(this, d);
    },
    onClose: function (d) {
      console.log('close')
    }
  });
  
$("#age").select({
    title: "选择年龄",
    multi: true,
    min: 0,
    max: 3,
    items: [
      {
        title: "儿童",
        value: 1,
        description: "额外的数据1"
      },
      {
        title: "少年",
        value: 2,
        description: "额外的数据2"
      },
      {
        title: "青年",
        value: 3,
        description: "额外的数据3"
      },
      {
        title: "中年",
        value: 4,
        description: "额外的数据4"
      },
      {
        title: "老年",
        value: 5,
        description: "额外的数据5"
      },
      {
        title: "学生",
        value: 6,
        description: "额外的数据6"
      },
      {
         title: "驾校学院",
         value: 7,
         description: "额外的数据7"
      },
    ],
    beforeClose: function(values, titles) {
      return true;
    },
    onChange: function(d) {
      console.log(this, d);
    },
    onClose: function (d) {
      console.log('close')
    }
  });
</script>


<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>